<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">添加产品</h4>
</div>
<style>
    #dvThead {
        background-color: #f0f0f0;
    }
    #dvThead .table {
        margin-bottom: 0;
    }
    #dvThead .table thead{
        background-color: #f0f0f0;
        text-align: center;
    }
    #dvThead .table thead th{
        text-align: center;
    }
    #dvTbody {
        max-height: 500px;
        overflow: auto;
    }
    #dvTbody .table tbody td{
        text-align: center;
    }
</style>
<form id="add-out-sku-form" action="/xqc/customer-delivery/delivery-demand-ajax" method="post" onsubmit="return checkAddOutSkuForm()">
    <div class="modal-body">
        <div class="row">
            <div class='form-inline margin'>
                <div id="dvThead" style="padding-right:17px">
                    <table class="table">
                        <thead>
                            <tr>
                                <th style="width: 25%">SKU</th>
                                <th style="width: 35%">产品名称</th>
                                <th style="width: 25%">下单数量</th>
                                <th style="width: 15%">操作</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div id="dvTbody">
                    <table class="table table-hover" id="table-detail">
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <button type="button" class="btn btn-sm btn-info" id="add-table-detail"><i class="fa fa-plus"></i>&nbsp;&nbsp;Add sku</button>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        {{ csrf_field() }}
        <input type="hidden" name="action" value="doAddOutOrderSku">
        <input type="hidden" name="param[id]" value="{{ $id }}">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>
<template id="table-detail-tpl">
    <tr>
        <td style="width:25%"><select style="width:100%" name="param[__index__][psku_id]" class="gird-sku-select" required></select></td>
        <td style="width:35%;padding-top: 16px;"></td>
        <td style="width:25%"><input type="text" class="form-control integer_num_"  placeholder="下单数量" name="param[__index__][order_num]" required></td>
        <td style="width:15%"><a class="btn btn-sm btn-danger table-detail-remove"><i class="fa fa-trash"></i> remove</a></td>
    </tr>
</template>
<script language="JavaScript" type="text/javascript">

    function checkAddOutSkuForm(){
        if($(".gird-sku-select").length == 0){
            swal('请添加产品', '', 'error');
            return false;
        }else{
            return true;
        }
    }

    $(function () {
        $('#add-table-detail').click(function (event) {
            $('#table-detail tbody').append($('#table-detail-tpl').html().replace(/__index__/g, $('#table-detail tr').length));
            $('.gird-sku-select').select2({
                ajax: {
                    url: "/xqc/api-sys/products-vague-sku",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term,
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        return {
                            results: $.map(data.data, function (d) {
                                return d;
                            }),
                            pagination: {
                                more: (params.page * 2) < data.total_count
                            }
                        };
                    },
                    cache: true
                },
                "allowClear":true,
                "placeholder":"输入SKU",
                "minimumInputLength":1,//最少输入多少个字符后开始查询
                escapeMarkup: function (markup) {
                    return markup;
                }
            }).on('change', function(event) {
                let objTarget = $(event.target);
                let pSkuId = objTarget.val();
                let nextTd = objTarget.closest('tr').find("td:eq(1)");
                if(!pSkuId){
                    nextTd.text('');
                }else{
                    $.getJSON('/xqc/api-sys/product-match',{'id':pSkuId},function(data){
                        nextTd.text(data);
                    });
                }
            });
            $(".integer_num_").inputmask("integer",{
                onKeyValidation: function () {
                    if($(this).val() < 0 || isNaN($(this).val())){
                        $(this).val('');
                    }
                }
            });
        });

        $('#table-detail').on('click', '.table-detail-remove', function(event) {
            $(event.target).closest('tr').remove();
        });

        $("#add-out-sku-form").ajaxForm(function (data) {
            if (typeof data === 'object') {
                if (data.status) {
                    $("#listDetailModal").modal('hide');
                    $(".modal-backdrop").remove();
                    $('body').removeClass('modal-open');
                    toastr.success('提交成功 !');
                    $.pjax.reload('#pjax-container');
                } else {
                    swal(data.message, '', 'error');
                }
            }
        });
    });
</script>
